<template>
  <div class="FreightTemplate">
    <h4>运费模板</h4>
    <div class="cus-tabs-style">
      <div class="key-search clearfix">
        <div class="floatfix">
          <el-input
            v-if="activeModel == '0'"
            v-model.trim="keySearchk"
            suffix-icon="el-icon-search"
            maxlength="20"
            placeholder="输入关键词搜索"
            @keyup.native="replaceSpace(0)"
          />
          <el-input
            v-if="activeModel == '1'"
            v-model.trim="keySearcht"
            suffix-icon="el-icon-search"
            maxlength="20"
            placeholder="输入关键词搜索"
            @keyup.native="replaceSpace(1)"
          />
          <el-button type="primary" @click="handelSearch">确认</el-button>
          <!--<el-button type="primary" @click="$router.push({name:'AddFreightModel'})">添加运费模板</el-button>  -->
          <el-button
            v-if="activeModel == '0'"
            type="primary"
            @click="
              $router.push({
                name: 'AddFreightModel',
                query: {
                  p:$ed({
                    activeModel: '1',
                    status: 'add'
                  })
                }
              })
            "
          >添加运费模板</el-button>
          <el-button
            v-else
            type="primary"
            @click="
              $router.push({
                name: 'AddFreightModel',
                query: {
                  p:$ed({
                    activeModel: '2',status: 'add'
                  })
                }
              })
            "
          >添加运费模板</el-button>
        </div>
      </div>
      <el-tabs v-model="activeModel" @tab-click="handleTabClidk">
        <el-tab-pane label="云仓物流" name="0">
          <el-table
            v-loading="loading"
            height="550"
            :data="Bindata"
            class="cus-table"
          >
            <el-table-column label="名称" prop="name" />
            <el-table-column label="使用商品" prop="goodsCount" />
            <el-table-column label="操作" align="right">
              <template slot-scope="scope">
                <div class="operation">
                  <el-button
                    type="text"
                    @click="handelCopy('K', scope.row)"
                  >复制</el-button>|
                  <el-button
                    type="text"
                    @click="handelEdit('K', scope.row.id, scope.row)"
                  >编辑</el-button>|
                  <el-button
                    type="text"
                    @click="handelDataRmove(scope.row.id)"
                  >删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="同城配送" name="1">
          <el-table
            v-loading="loading"
            height="550"
            :data="Bindata"
            class="cus-table"
          >
            <el-table-column label="名称" prop="name" />
            <el-table-column label="使用商品" prop="goodsCount" />
            <el-table-column label="操作" align="right">
              <template slot-scope="scope">
                <div class="operation">
                  <el-button
                    type="text"
                    @click="handelCopy('T', scope.row)"
                  >复制</el-button>|
                  <el-button
                    type="text"
                    @click="handelEdit('T', scope.row.id, scope.row)"
                  >编辑</el-button>|
                  <el-button
                    type="text"
                    @click="handelDataRmove(scope.row.id)"
                  >删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-pagination
        style="float:right;margin-top:40px"
        :current-page="pages.page"
        :page-sizes="pages.pageSizes"
        :page-size="pages.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { freightTemplateList, FreightTemplateDel } from './api/FreightTemplate'
/** 运费模板 */
export default {
  name: 'FreightTemplate',
  data() {
    return {
      activeModel: '0',
      keySearchk: '',
      keySearcht: '',
      Bindata: [],
      loading: false,
      pages: {
        pageSizes: [20, 30, 40, 50],
        page: 1,
        limit: 20,
        total: 0
      }
    }
  },
  mounted() {
    this.loadding()
  },
  activated() {
    this.loadding()
  },
  methods: {
    /** 复制 */
    handelCopy(key, row) {
      this.$confirm('你要复制这条数据吗？', '提示', {
        type: 'info'
      }).then(() => {
        switch (key) {
          case 'K':
            this.$router.push({
              name: 'AddFreightModel',
              query: {
                p: this.$ed({
                  activeModel: '1',
                  templateID: row.id,
                  row: row,
                  status: 'copy'
                })
              }
            })
            break
          case 'T':
            this.$router.push({
              name: 'AddFreightModel',
              query: {
                p: this.$ed({
                  activeModel: '2',
                  templateID: row.id,
                  row: row,
                  status: 'copy'
                })
              }
            })
            break
        }
      })
    },
    /** 编辑 */
    handelEdit(value, templateID, row) {
      switch (value) {
        // 同城
        case 'T':
          this.$router.push({
            name: 'EditFreightModel',
            query: {
              p: this.$ed({
                activeModel: '2',
                templateID: templateID,
                row: row,
                status: 'edit'
              })
            }
          })
          break
        // 快递
        case 'K':
          this.$router.push({
            name: 'EditFreightModel',
            query: {
              p: this.$ed({
                activeModel: '1',
                templateID: templateID,
                row: row,
                status: 'edit'
              })
            }
          })
          break
      }
    },
    /** 删除 */
    handelDataRmove(id) {
      this.$confirm('你确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          FreightTemplateDel({ templateID: id }).then(() => {
            this.$message.success('成功')
            this.loadding()
          })
        })
        .catch(() => {
          console.log('取消删除')
        })
    },
    /** 替换空格*/
    replaceSpace(number) {
      if (number == 0) {
        this.keySearchk = this.keySearchk.replace(/\s*/g, '')
      } else if (number == 1) {
        this.keySearcht = this.keySearcht.replace(/\s*/g, '')
      }
    },
    /** 搜索 */
    handelSearch() {
      this.loadding()
    },
    loadding() {
      this.loading = true
      freightTemplateList({
        shopId: localStorage.getItem('shopId'),
        keySearch: this.activeModel === '0' ? this.keySearchk : this.keySearcht,
        type: this.activeModel,
        page: this.pages.page,
        limit: this.pages.limit
      }).then(request => {
        this.Bindata = request.data.data.data
        this.pages.total = request.data.data.total
        this.loading = false
      })
    },
    handleTabClidk(e) {
      this.pages.page = 1
      this.pages.limit = 20
      if (e.name === '0') {
        this.keySearcht = ''
      } else {
        this.keySearchk = ''
      }
      this.loadding()
    },
    handleSizeChange(v) {
      this.pages.limit = v
      this.loadding()
    },
    handleCurrentChange(v) {
      this.pages.page = v
      this.loadding()
    }
  }
}
</script>

<style lang="scss" scoped>
.clearfix:after {
  content: '020';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
.FreightTemplate {
  padding: 50px 100px;
  .cus-tabs-style {
    .key-search {
      width: 100%;
      .floatfix {
        float: right;
        .el-input {
          width: 220px;
        }
      }
    }
    .cus-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .cus-table {
      margin-top: 40px;
      .operation {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 0px auto;
      }
    }
  }
}
</style>
